/* --- Awwwards Ribbons --- */

/* Base */

#awwwards {
    position: fixed;
    top: 30%;
    z-index: 9999;
}

/* Left */

#awwwards.left {
    left: 0;
}

/* Right */

#awwwards.right {
    right: 0;
}

/* Link */

#awwwards a {
    display: block;
    width: 70px;
    height: 105px;
    text-indent: -8000px;
    background-repeat: no-repeat;
    background-position: 0 0;
    overflow: hidden;
}

/* Black */

#awwwards.left.black a {
    background-image: url('ribbons/awwwards_honorable_black_left.png');
}

#awwwards.right.black a {
    background-image: url('ribbons/awwwards_honorable_black_right.png');
}

/* White */

#awwwards.left.white a {
    background-image: url('ribbons/awwwards_honorable_white_left.png');
}

#awwwards.right.white a {
    background-image: url('ribbons/awwwards_honorable_white_right.png');
}

/* Green */

#awwwards.left.green a {
    background-image: url('ribbons/awwwards_honorable_green_left.png');
}

#awwwards.right.green a {
    background-image: url('ribbons/awwwards_honorable_green_right.png');
}


/* MEDIA QUERIES */

/* Landscape phone to portrait tablet */

@media (max-width: 767px) {

    /* hidden */
    #awwwards {
        display: none;
    }

}

/* Retina Displays */

/* Target any device with retina display (ie iPad 3 and MacBook Pro) */

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {

    #awwwards a {
        -moz-background-size: 70px 105px;
        -ie-background-size: 70px 105px;
        -o-background-size: 70px 105px;
        -webkit-background-size: 70px 105px;
        background-size: 70px 105px;
    }

    /* Gray */
    #awwwards.left.black a {
        background-image: url('ribbons/awwwards_honorable_black_left2x.png');
    }

    #awwwards.right.black a {
        background-image: url('ribbons/awwwards_honorable_black_right2x.png');
    }

    /* White */
    #awwwards.left.white a {
        background-image: url('ribbons/awwwards_honorable_white_left2x.png');
    }

    #awwwards.right.white a {
        background-image: url('ribbons/awwwards_honorable_white_right2x.png');
    }

    /* Green */
    #awwwards.left.green a {
        background-image: url('ribbons/awwwards_honorable_green_left2x.png');
    }

    #awwwards.right.green a {
        background-image: url('ribbons/awwwards_honorable_green_right2x.png');
    }

}